import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { actionCreators } from 'components/Login/store'
import {
  Form,
  Input,
  Button,
  Row,
  Col
} from 'antd'
import {
  Wrapper,
  IconWrapper,
  CodeWrapper
} from './style'

const FormItem = Form.Item
const InputGroup = Input.Group

class Forms extends PureComponent {
  componentDidMount () {
    this.props.createCode()
  }

  render () {
    const { history, codeText, loading, createCode, loginCommit } = this.props
    const { getFieldDecorator, validateFields } = this.props.form

    return (
      <Wrapper>
        <Form>
          <FormItem>
            <InputGroup compact>
              <IconWrapper>
                <i className="iconfont">&#xe605;</i>
              </IconWrapper>
              {
                getFieldDecorator('userName', {
                  rules: [{ required: true, message: '账户不能为空' }],
                })(
                  <Input
                    placeholder="请输入账户"
                    style={{width: '208px'}}
                    onPressEnter={() => loginCommit(validateFields, loading, history)}
                  />
                )
              }
            </InputGroup>
          </FormItem>
          <FormItem>
            <InputGroup compact>
              <IconWrapper>
                <i className="iconfont">&#xe607;</i>
              </IconWrapper>
              {
                getFieldDecorator('password', {
                  rules: [{ required: true, message: '密码不能为空' }],
                })(
                  <Input
                    type="password"
                    placeholder="请输入密码"
                    style={{width: '208px'}}
                    onPressEnter={() => loginCommit(validateFields, loading, history)}
                  />
                )
              }
            </InputGroup>
          </FormItem>
          <FormItem>
            <Row>
              <Col span={12}>
                {
                  getFieldDecorator('code', {
                    rules: [{ required: true, message: '验证码不能为空' }],
                  })(
                    <Input
                      placeholder="请输入验证码"
                      style={{width: '115px'}}
                      onPressEnter={() => loginCommit(validateFields, loading, history)}
                    />
                  )
                }
              </Col>
              <Col span={12}>
                <CodeWrapper onClick={createCode}>{codeText}</CodeWrapper>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              htmlType="submit"
              className="button"
              loading={loading}
              onClick={() => loginCommit(validateFields, loading, history)}
            >
              { loading ? '登录中...' : '登录' }
            </Button>
          </FormItem>
        </Form>
      </Wrapper>
    )
  }
}

const WrapperForm = Form.create()(Forms)

const mapState = (state) => ({
  codeText: state.getIn(['login', 'codeText']),
  loading: state.getIn(['login', 'loading'])
})

const mapActions = (dispatch) => ({
  createCode: () => {
    let str = ''
    const codeLength = 4
    const codeChars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
      'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    ]
    for (let i = 0; i < codeLength; i++) {
      const charNum = Math.floor(Math.random() * 52)
      str += codeChars[charNum]
    }
    dispatch(actionCreators.setCodeTextAction(str))
  },

  loginCommit: (validateFields, loading, history) => {
    if (loading) {
      return
    }

    validateFields((err, values) => {
      if (!err) {
        dispatch(actionCreators.goLoginAction(values, history))
      }
    })
  }
})

export default connect(mapState, mapActions)(withRouter(WrapperForm))
